<template>
  <a-layout>
    <a-layout-header>
      <!-- 标题栏目 -->
      <div class="head-container flex items-center justify-between">
        <div class="head-title">
          <div class="logo-bg"></div>
        </div>

        <a-menu :selectedKeys="currentRoute" mode="horizontal" @click="handleRouteChange">
          <template v-for="(item, index) in menuRoute">
            <a-sub-menu v-if="item.children" :key="item.path" :title="item.meta.title">
              <a-menu-item v-for="ele in item.children" :key="ele.path" :title="ele.meta.title">{{ ele.meta.title }}</a-menu-item>
            </a-sub-menu>
            <a-menu-item v-else :key="menuRoute[index].path">{{ item.meta.title }}</a-menu-item>
          </template>
        </a-menu>

        <div class="head-operate flex justify-end items-center">
          <a-dropdown placement="bottomRight" v-if="!hasLogin">
            <a-button type="text" class="flex items-center text-lg pl-2 pr-1">
              {{ name || 'admin' }}
              <arrowDownSvg />
            </a-button>
            <template #overlay>
              <a-menu>
                <a-menu-item :style="{ padding: 0 }">
                  <div class="flex items-center my-2 mx-4" :style="{ width: 'max-content' }" @click="handleLogout">
                    <logoutSvg class="mr-1 w-[20px] h-[20px]" />
                    注销登录
                  </div>
                </a-menu-item>
              </a-menu>
            </template>
          </a-dropdown>
        </div>
      </div>
    </a-layout-header>

    <a-layout-content class="normal-screen-content">
      <router-view />
    </a-layout-content>
  </a-layout>
</template>

<script>
  import { Modal } from 'ant-design-vue'
  import { mapState } from 'vuex'
  // 需要后端修改的位置 在这里import layoutname form @/router/routes
  import { homeRoute } from '@/router/routes'
  import { cloneDeep } from 'lodash'
  import arrowDownSvg from '@/assets/icons/arrow-down.svg?inline'
  import logoutSvg from '@/assets/icons/logout.svg?inline'
  export default {
    name: 'HeaderTemplate',
    components: {
      arrowDownSvg,
      logoutSvg
    },
    data () {
      return {
        hasLogin: process.env.VITE_HAS_LOGIN === 'true',
        menuRoute: []
      }
    },
    computed: {
      ...mapState({
        name: state => state.user.name
      }),
      currentRoute () {
        const { path } = this.$route
        if (path) {
          return [path]
        }
        return []
      }
    },
    mounted () {
      this.menuRoute = this.getShowRoute(homeRoute)
      this.getCurrentRoute(homeRoute)
    },
    methods: {
      getShowRoute (data) {
        const menuData = cloneDeep(data)
        return (
          menuData?.filter((item) => {
            if (item.children?.length > 0) {
              // 目前最多只有二级路由
              item.children = item.children.filter((item) => item.meta?.hidden === false || item.meta?.hidden === 'false')
            }
            return item.meta?.hidden === false || item.meta?.hidden === 'false'
          }) ?? []
        )
      },
      getCurrentRoute (data) {
        for (let i = 0; i < data.length; i++) {
          const ele = data[i]
          if (ele.path === this.$route.path && ele.children) {
            this.menuRoute = ele.children
          } else if (ele.children) {
            this.getCurrentRoute(ele.children)
          }
        }
      },
      handleLogout () {
        Modal.confirm({
          title: `确定要注销吗？`,
          onOk: async () => {
            this.$router.push({ path: '/login' })
          }
        })
      },
      handleRouteChange (val) {
        this.$router.push({ path: val.key })
      }
    }
  }
</script>

<style scoped lang="scss">
  // .ant-menu {
  //   height: calc(100vh - $base-header-height-rem);
  //   overflow-y: auto;
  // }

  .ant-layout-header {
    padding: 0 32px;
    height: $base-header-height;
    background: #040e1b;
  }

  .ant-layout-content {
    padding: 0;
  }

  .normal-screen-content {
    height: calc(100vh - $base-header-height);
    background-color: $base-bg-color;
  }

  @media screen and (max-height: 850px) {
    .ant-layout-header {
      padding: 0 0.32rem;
      height: $base-header-height-rem;
    }

    .ant-layout-content {
      height: calc(100vh - $base-header-height-rem);
    }
  }
  .head-container {
    height: 100%;
    .head-title {
      width: 520px;
      height: 60px;
      font-size: 30px;
      font-weight: 400;
      letter-spacing: 0.08em;
      color: $white-color-0;
      display: flex;
      align-items: center;
      .logo-bg {
        width: 300px;
        height: 60px;
        background: url('@/assets/images/logo.png') no-repeat;
        background-size: contain;
      }
    }
    .head-operate {
      button {
        color: rgb(255 255 255 / 85%);
      }
    }
  }
</style>
